<template>
	<div>
		<div class="app-container ">
			<Search :lookup="data.lookup" @investigate="inves" />
			<TopInfo />
			<div class="mt-6 text-right">
				<el-button type="primary" @click="toDevices">{{ $t('presets.assignView.assignViews') }}</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
                <el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" :label=" $t('presets.view.name')" show-overflow-tooltip />
				
				<el-table-column prop="status" :label="$t('public.state')" show-overflow-tooltip>
                    <template #default="scope">
						{{ $t(`${getPlevel.setStatus(scope.row.status)}`) }}
					</template>
                </el-table-column>
				<el-table-column prop="publish_time" :label="$t('date.forceTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.publish_time, 3) }}
					</template>
				</el-table-column>
                <el-table-column prop="expire_time" :label="$t('date.failureTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.expire_time, 3) }}
					</template>
				</el-table-column>
                <el-table-column prop="notes" :label="$t('presets.assignView.desc')" show-overflow-tooltip />
				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button v-prmis="'machine_view_update'" size="small" type="warning" @click="modify(scope.row)">{{ $t('public.modify') }}</el-button>
						<el-button v-prmis="'machine_view_del'" size="small" type="danger" @click="del(scope.row)">{{ $t('public.del')}}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.source" @exposeData="current" @fraction="fraction" />
		</div>
		<!-- 修改弹窗 -->
		<el-dialog v-model="data.demonstrate" center width="30%" :title="$t('presets.assignView.viewInfo')">
			<el-form v-if="data.demonstrate" :model="data.info" label-width="120px" ref="ruleFormRef">
				<el-form-item :label="$t('presets.assignView.viewName')" prop="name">
					<el-input v-model="data.info.name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
                <el-form-item :label="$t('public.state')" prop="status">
                    <el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
                        <el-option :label="$t('public.enable')" :value="1"/>
                        <el-option :label="$t('public.disable')" :value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('date.forceTime')">
                    <el-date-picker
                    format="YYYY/MM/DD"
                    v-model="data.info.publish_time"
                    type="date"
                    :placeholder="$t('message.date')">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('date.failureTime')">
                    <el-date-picker
                    format="YYYY/MM/DD"
                    v-model="data.info.expireate_time"
                    type="date"
                    :placeholder="$t('message.date')">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('presets.assignView.viewDesc')">
                    <el-input type="textarea" v-model="data.info.notes"></el-input>
                </el-form-item>
				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="onSave('upDate')">{{ $t('public.save')}}</el-button>
						<el-button @click="data.demonstrate = false">{{ $t('public.cancel')}}</el-button>
					</div>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { ElMessage, ElMessageBox } from "element-plus";
import { gettemplateList, getUpdatemachine, getmMachineList, getDelmachine } from '@/api/presets';
import { useRouter } from "vue-router";
import {reactive} from 'vue'
let ruleFormRef = ref<any>();
const router = useRouter()
let data = reactive({
	lookup:[ // 筛选栏
			{title:$t('presets.view.name'),type:'input',value:'',key:'name'},
			{ title: $t('machine.code'), type: 'machine', value: '', key: 'machine_id' }
		],
	demonstrate: false,
	mtloading: false, // 加载
	list: [], // 列表信息
	rules: { // 表单验证
		name: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		resolution: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	},
	source: { // 筛选数据
		page: 1,
		pageNum: 15,
		name:'',
		machine_id:''
	},
	info: { 
        template_id:null,
        view_id:null,
        m_id:'',
        mv_id: '',
		name: '',
		notes:'',
		publish_time: null,
		expireate_time: null,
		status: null,
	}, // 修改内容
	total: 0, // 总条数
	formParam: {}, // 填写表单
	showdialog: false,
	isPreviewTilte: true,
	layoutData: [],
	rowData: {},
	templateList: [],
    
})
// 添加模板
let toDevices = () => {
    router.push({ path: '/presets/assignView/assignDevices'})
	data.isPreviewTilte = true
	gettemplateList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.templateList = res.data.data
			data.total = res.data.total
		}
	})
}

// 保存
let onSave = (type) => {
    if(type == 'upDate'){
        const publishParse= Date.parse(data.info.publish_time)
        const expireateParse= Date.parse(data.info.expireate_time)
        const publish_time = new Date(publishParse);
        const expireate_time = new Date(expireateParse);
        data.formParam = {
            mv_id: data.info.mv_id,
            name: data.info.name,
            notes:data.info.notes,
            publish_time: data.info.publish_time,
            expireate_time: data.info.expireate_time,
            status: data.info.status,
		}
        data.formParam.publish_time = publish_time.getTime() / 1000
        data.formParam.expireate_time = expireate_time.getTime() / 1000
        getUpdatemachine(data.formParam).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.modifySuccess'),
					type: 'success'
				})
				data.demonstrate = false
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
    }
}
// 修改模板
let modify = (row) => {
    const datePblish = new Date(row.publish_time*1000);
	if(row.expire_time){
		data.info.expireate_time = new Date(row.expire_time*1000);
	}
	
    data.demonstrate = true
	data.info = {
		mv_id: row.mv_id,
		name: row.name,
		notes: row.notes,
		publish_time: datePblish,
		status: row.status,
	}
}
// 删除分配视图
let del = (row) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			if(!row.mv_id){
				return	ElMessage({
					message: $t('message.idunEmpty'),
					type: 'error'
				}) 
			}
			getDelmachine({ mv_id: row.mv_id }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}
// 获取分配视图列表
let getlist = () => {
	data.mtloading = true
	getmMachineList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}
// 查询回调
let inves = (e) =>{
		data.source.name = e.name
		data.source.machine_id = e.machine_id
		data.source.page = 1
		data.source.pageNum = 15
		getlist()
	}
// 页数回调
let current = (e) => {
	data.source.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.source.pageNum = e
	getlist()
}
getlist()


</script>
<style scoped>

</style>


